<template>
  <div id="header">
    <div class="header-top">
      <img src="../assets/logo.jpg" alt="" />
      <div class="head-top-text">
        <p>老乡鸡(光谷软件新城店)</p>
        <p>蜂鸟专送</p>
        <p>单人精彩套餐 / VC无限橙果汁全场八折</p>
      </div>
    </div>
    <div class="header-banner">
      <van-notice-bar
        delay="0"
        color="#ffffff"
        background="rgba(0, 0, 0, 0.3)"
        left-icon="volume-o"
        text="老乡鸡作为「国民中式快餐」深受大众喜爱，从2019年进驻上海，如今门店已突破150家。从一碗鸡汤到不断推陈出新的菜品，为每一位顾客提供温馨的用餐体验，不愧能成为打工人心中的快乐食堂。"
      />
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style lang="less" scoped>
#header {
  height: 100%;
  width: 100vw;
  background-color: rgb(9, 67, 48);
  .header-top {
    width: 100vw;
    height: 75%;
    // background: red;
    display: flex;
    align-items: center;
    img {
      width: 50px;
      height: 50px;
      border-radius: 15%;
      margin-left: 15px;
    }
    .head-top-text {
      p:nth-child(1) {
        font-weight: 700;
        font-size: 15px;
      }
      p {
        color: white;
        margin: 1.8px 5px;
      }
    }
  }
  .header-banner {
    height: 25%;
    .van-notice-bar {
      padding-left: 5px;
      height: 100%;
      font-size: 10px;
      ::before {
        font-size: 13px;
      }
    }

    :deep(.van-notice-bar__left-icon),
    :deep(.van-notice-bar__right-icon) {
      // background: red;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 30px;
    }
  }
}
</style>
